<template>
  <el-dialog
    :visible.sync="datas.show"
    :show-close="false"
    width="387px"
    top="8vh"
    custom-class="realTimeView"
  >
    <section class="phoneAll">
      <img class="statusBar" src="@/assets/images/template/h5/phoneTop.png" />
      <!-- 动态组件 -->
      <section class="phone-container">
        <el-scrollbar>
          <component
            :is="item.component"
            v-for="(item, index) in val.component"
            :key="index"
            :datas="item.setStyle"
            class="componentsClass"
            :data-type="item.type"
          />
        </el-scrollbar>
      </section>
      <img class="statusBar" src="@/assets/images/template/h5/tabbar.png" />
    </section>
  </el-dialog>
</template>

<script>
/* 组件目录 START */
import placementarea from '../componentscom/placementarea'
import topNav from '../componentscom/topNav'
import banner from '../componentscom/banner'
import graphicNav from '../componentscom/graphicNav'
import advert from '../componentscom/advert'
import intentCourse from '../componentscom/intentCourse'
import course from '../componentscom/course'
import teacher from '../componentscom/teacher'
import topic from '../componentscom/topic'
/* 组件目录 END */

export default {
  name: 'RealTimeView',
  components: {
    placementarea,
    topNav,
    banner,
    graphicNav,
    advert,
    intentCourse,
    course,
    teacher,
    topic
  },
  inject: ['reload'],
  props: {
    datas: {
      type: Object,
      default: () => {
        return {
          show: false
        }
      }
    },
    val: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
::v-deep .realTimeView {
  background: transparent;
  box-shadow: none;
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    background: #dcdfe6;
    border-radius: 16px;
    padding: 6px;
  }
}

.realTimeView {
  .phoneAll {
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    /* 状态栏 */
    .statusBar {
      width: 100%;
      display: block;
    }
    .phone-container {
      height: 640px;
      ::v-deep.el-scrollbar {
        height: 100%;
      }
      ::v-deep.el-scrollbar__wrap {
        height: 100%;
      }
    }
  }
}
</style>
